<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/view/include/taglib.jsp" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!--wangEditor是一款基于jquery框架开发的插件-->
        <link href="${project}/ds/lib/layui/css/layui.css" rel="stylesheet" />
        <link href="${project}/ds/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" />
        <link href="${project}/ds/lib/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet" />
        <link href="${project}/ds/lib/ligerUI/skins/Gray2014/css/all.css" rel="stylesheet" />
		<script src="${project}/ds/js/js/jquery-2.1.1.min.js" type="text/javascript"></script>
		<script src="${project}/ds/js/js/Form64.js" type="text/javascript"></script>
        <script src="${project}/ds/js/layeralert.js" type="text/javascript"></script>
        <script src="${project}/ds/lib/layui/layui.js" type="text/javascript"></script>

        <style>

            /*layer弹出*/
            .layer-skin-raduis {
                background-color: #fff !important;
                border-radius: 15px !important;
                -moz-box-shadow: 0 0 12px #999;
                -webkit-box-shadow: 0 0 12px #999;
                box-shadow: 0 0 12px #999;
            }

            .layer-skin-red {
                background-color: red !important;
                border-radius: 15px !important;
                -moz-box-shadow: 0 0 12px #999;
                -webkit-box-shadow: 0 0 12px #999;
                box-shadow: 0 0 12px #999;
            }


            .layer-skin-green {
                background-color: #009688 !important;
                border-radius: 15px !important;
                -moz-box-shadow: 0 0 12px #999;
                -webkit-box-shadow: 0 0 12px #999;
                box-shadow: 0 0 12px #999;
            }

                .layer-skin-raduis .layui-layer-content, .layer-skin-red .layui-layer-content, .layer-skin-green .layui-layer-content {
                    border-radius: 15px !important;
                }

            .fa-check-circle, .fa-times-circle-o {
                color: #fff;
                font-size: 45px !important;
                position: absolute;
                top: 11px;
                left: 20px;
            }
        </style>
</head>
<body>

		<div class="layui-btn-group" id="title" style="margin-left:20px;margin-top:20px">
			<!--<div class="layui-btn" id="Protocol1">选购流程</div>

			<div class="layui-btn" id="Protocol2">认购须知</div>

			<div class="layui-btn" id="Protocol3">认购协议</div>-->
		</div>


        <div>
            <div style="float:left">
                <div style="margin-left:20px; margin-top: 20px;display: none">
                    页面名称
                </div>
                <div style="margin-left:20px;margin-top:0px;display: none">
                    <input id="name" style="width:394px;font-size:24px" />
                </div>
                <div style="margin-left:20px;margin-top:20px;display: none">
                    页面内容
                </div>
                <!--编辑器位置-->
                <div style="max-width:394px;margin:20px;margin-top:20px">
                    <script id="editor" type="text/plain" style="width:394px;"></script>
                </div>
                <div style="margin-left:20px;margin-top:20px;display: none">
                    页面备注
                </div>
                <div style="margin-left:20px;margin-top:0px;display: none">
                    <input id="remark" style="width:375px;font-size:12px" />
                </div>
                <!--<div id="show_box" style="border: 1px solid gray;margin-left:50px"></div>-->
                <div class="layui-btn" id="ProtocolSubmit" style="margin-left:120px;margin-top:0px">保存</div>
                <div class="layui-btn" id="ProtocolDel" style="margin-left:20px;margin-top:0px" onclick="Del()">删除</div>
            </div>
            <div style="float:left">
            </div>
        </div>

		<!--效果展示框-->
		<!--脚本控制-->
	<script type="text/javascript">
	    

	    var DISABLEDCLASS = "layui-btn";
	    var NormalDCLASS = "layui-btn layui-btn-danger";
	    var b = new Base64();
	    var ChoiceId;
	    var htmldata;
	    var htmlcount;
	    layui.use(['upload', 'layer'],
	        function () {
	            layer = layui.layer;
            });

	    function getContent() {
	        return UE.getEditor('editor').getContent();
		
	    }
	    function setContent(isAppendTo) {
	        UE.getEditor('editor').setContent(isAppendTo);
	    }

	    function Choice(id) {
	        if (ChoiceId != null) {
	            $("#Html" + ChoiceId).removeClass(NormalDCLASS).addClass(DISABLEDCLASS);
	        }
	        $("#HtmlNew").removeClass(NormalDCLASS).addClass(DISABLEDCLASS);
	        $("#Html" + id).removeClass(DISABLEDCLASS).addClass(NormalDCLASS);
	        ChoiceId = id;
	        var str = Base64decode(htmldata[ChoiceId].Content);
	        initEdit(str);
	        $("#name").val(htmldata[ChoiceId].Name);
	        $("#remark").val(htmldata[ChoiceId].Remark);
	    }

	    function Add() {
	        if (ChoiceId != null) {
	            $("#Html" + ChoiceId).removeClass(NormalDCLASS).addClass(DISABLEDCLASS);
	        }
	        $("#HtmlNew").removeClass(DISABLEDCLASS).addClass(NormalDCLASS);
	        ChoiceId = null;
            setContent("");
	        $("#name").val("");
	    }

	    function Del() {
	        if (ChoiceId != null) {
	            var Id = htmldata[ChoiceId].Id;
	            $.ajax({
	                url: "../data/Tuser.ashx?Action=delHtml",
	                type: "post",
	                dataType: "json",
	                data: { HtmlId: Id },
	                success: function (result) {
	                    if (result.result === "true") {
	                        window.layermsg("页面删除成功");
	                        getdata();
	                        if (htmlcount > 0) {
	                            Choice(0);
	                        }
	                        else {
	                            Add();
	                        }
	                    }
	                    else {
	                        window.layermsg(result.msg);
	                    }
	                }
	            });
	        }
	        else {
	            window.layermsg("请先选择页面");
	        }
	    }

	    function initEdit(oldText) {
            setContent(oldText);
	    }

	    function getdata() {
	        $("#title").html("");
	        var div = $("<div>"); //定义一个form表单
	        div.attr("id", "HtmlNew");
	        div.attr("class", "layui-btn");
	        div.attr("onclick", "Add()");
	        $("#title").append(div);
	        $("#HtmlNew").html("添加");
	        $.ajax({
	            url: "/textEditor/getGrid",
	            type: "post",
	            //data: { Action: "GetAllHtml" },
	            dataType: "json",
	            async: false,
	            success: function (data) {
	                htmldata = data["Rows"];
	            }
	        });
	        console.log(htmldata);
	        htmlcount = 0;
	        for (var i in htmldata) {
	            var div = $("<div>"); //定义一个form表单
	            div.attr("id", "Html" + i);
	            div.attr("class", "layui-btn");
	            div.attr("onclick", "Choice(" + i + ")");
	            $("#title").append(div);
	            $("#Html" + i).html(htmldata[i].Name);
	            //$("#Html" + i).click(Choice("Html" + i));
	            //console.log(htmldata[i]);
	            htmlcount++;
	        }
        }
        
	    $(function() {
	        //实例化编辑器
	        //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
            var ue = UE.getEditor('editor');
            
	        ue.ready(function () {
	            ue.setHeight(400);
	            //获取本来的数据存储
	            getdata();
	            if (htmlcount > 0) {
	                Choice(0);
	            }
	            else {
	                Add();
	            }
            });

	        $("#ProtocolSubmit").click(function () {
                console.log(getContent());
	            var Id;
	            if (ChoiceId != null) {
	                Id = htmldata[ChoiceId].Id;
	            }
	            var name = $("#name").val();
	            var remark = $("#remark").val();
                var content = b.encode(getContent());
	            $.ajax({
	                url: "/textEditor/ueditorSave",
	                type: "post",
	                dataType: "json",
	                data: { HtmlId: Id, HtmlName: name, HtmlContent: content, HtmlRemark: remark},
	                success: function (result) {
	                    if (result.result === "true") {
	                        window.layermsg("页面保存成功");
	                        getdata();
	                        if (ChoiceId == null) {
	                            ChoiceId = htmlcount - 1;
	                        }
	                        console.log(ChoiceId);
	                        Choice(ChoiceId);
	                    }
	                    else {
	                        window.layermsg(result.msg);
	                    }
	                }
	            });
	            layer = layui.layer;

	        })
	    })

	</script>

		<!--按照官网上的说明，js和css的这两个引用应该放在body的末尾-->
		<!--<script src="${project}/ds/js/js/wangEditor.js"></script>
		<link href="http://cdn.bootcss.com/wangeditor/2.1.20/css/wangEditor.css" rel="stylesheet">-->

        <script type="text/javascript" charset="utf-8" src="${project}/ds/utf8-jsp/ueditor.config.js"></script>
        <script type="text/javascript" charset="utf-8" src="${project}/ds/utf8-jsp/ueditor.all.min.js"></script>
        <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
        <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
        <script type="text/javascript" charset="utf-8" src="${project}/ds/utf8-jsp/lang/zh-cn/zh-cn.js"></script>
	</body>

</html>